<template>
    <s-layout title="粉丝" navbar="custom1" color='#333333' :bgStyle="{ color: '#fff' }">
        <assNavbar title="粉丝" :background="{ BGcolor: '#fff', img: 'none' }">
        </assNavbar>
        <view class="countBar">我的粉丝&nbsp;&nbsp;({{ userInfo.fans_amount || 0 }}) </view>
        <view class="list" v-for="(item, index) in state.fansList" :key="item"
            @click="jump('/pages/user/userCenter/index?isMe=false&mobile=' + item.mobile)">
            <view class="avatar">
                <image :src="item.avatar ? sheep.$url.cdn(item.avatar) : 'https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/static/img/default_avatar.png?x-oss-process=image/resize,w_200,h_200'" mode="aspectFill" style="width: 100%;height: 100%;"></image>
            </view>
            <view class="name">{{ item.nickName || '空' }}</view>
            <view :class="item.mutual_care == 0 ? 'status no' : 'status'" @click.stop="follow(item.user_id, index)" v-if="assUser.mobile === state.mobile">{{
                item.mutual_care == 0 ? '回关' : item.mutual_care == 1 ? '互相关注' : '错误' }}</view>
        </view>
    </s-layout>
</template>
<script setup>
import assNavbar from '@/components/ass-navbar.vue'
import sheep from '@/sheep';
import { ref, reactive, computed } from 'vue'
import assApi from '@/association/api'
import { onLoad, onShow } from '@dcloudio/uni-app';
import association from '@/association/store'
// 用户信息
const userInfo = computed(() => sheep.$store('user').userInfo);
const assUser = computed(() => association().userInfo)
onLoad(async (options) => {
	state.mobile = options.mobile
    let fansList = await assApi.info.fansList(
        {
            mobile: options.mobile
        }
    )
    state.fansList = fansList.data
})
onShow(async () => {
    // let pagearr = getCurrentPages();//获取应用页面栈
    // let currentPage = pagearr[pagearr.length - 1];//获取当前页面信息
    // console.log('option:', currentPage.options)//获取页面传递的信息
    // let fansList = await assApi.info.fansList(
    //     {
    //         mobile: currentPage.options.mobile
    //     }
    // )
    // state.fansList = fansList.data
})
const state = reactive({
    fansList: [],
	mobile:''
})
const follow = async (id, index) => {
    let res = await assApi.info.operate({
        be_user_id: id
    })
    state.fansList[index].mutual_care = res.data.is_care
}

const jump = (url) => {
    sheep.$router.go(url);
}
</script>
<style lang="scss" scoped>
.countBar {
    height: 56rpx;
    width: 100vw;
    background: #F7F6F8;
    color: #999;
    line-height: 56rpx;
    padding-left: 32rpx;
}

.list {
    height: 160rpx;
    width: 100vw;
    position: relative;
    border-bottom: 2rpx solid #f3f3f3;

    .avatar {
        width: 112rpx;
        height: 112rpx;
        border-radius: 50%;
        overflow: hidden;
        position: absolute;
        left: 24rpx;
        top: 24rpx;
    }

    .name {
        position: absolute;
        left: 168rpx;
        top: 64rpx;
    }

    .status {
        position: absolute;
        top: 52rpx;
        right: 32rpx;
        width: 156rpx;
        height: 56rpx;
        background: #FAFAFA;
        border-radius: 28rpx;
        text-align: center;
        line-height: 56rpx;
        color: #999999;
        border: 2rpx solid #FAFAFA;
    }

    .no {
        color: #48DFBD;
        border: 2rpx solid #48DFBD;
    }


}</style>
